/**
 * Created by jijin on 2017/7/17.
 *
 * 顶部导航栏组件
 */
import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Platform,
  StatusBar,
  TouchableOpacity
} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

import {AppColors, AppSizes} from '../../style';

export default class NavBar extends Component {
  render() {
    let {leftIsBack, navigator} = this.props;
    let {title, colorText, containerStyle} = this.props;
    let {leftOn, leftText, onLeftPress} = this.props;
    let {rightOn, rightText, onRightPress} = this.props;
    let isAndroid = Platform.OS === 'android';
    leftIsBack = leftIsBack !== undefined ? leftIsBack : !onLeftPress;

    /**
     * 是否展示左侧按钮
     * 1 - 开启展示
     * 2 - 后退操作/非返回操作（限安卓平台）
     */
    let enableLeftMenu = leftOn && (leftIsBack || (!leftIsBack && isAndroid));

    let defaultLeftMenuText;

    /**
     * 判断左侧显示
     */
    if (leftIsBack) {
      //后退操作
      defaultLeftMenuText = isAndroid
        ? <Ionicons name="md-arrow-back" size={24} color={AppColors.textPrimary}/>
        : <Ionicons name="ios-arrow-back" size={32} color={AppColors.textPrimary}/>;
    } else {
      //菜单操作
      defaultLeftMenuText = isAndroid
        ? <Ionicons name="md-menu" size={24} color={AppColors.textPrimary}/>
        : null;
    }

    //左边按钮选项
    leftText = leftText || defaultLeftMenuText;
    colorText = colorText || AppColors.textPrimary;
    onLeftPress = onLeftPress || (() => navigator.pop());
    containerStyle = containerStyle || {};
    containerStyle.backgroundColor = containerStyle.backgroundColor || AppColors.brand.primary;

    return (
      <View style={[styles.navBarContainer, containerStyle]}>
        <View style={styles.statusBar}>
          <StatusBar
            translucent={true}
            backgroundColor={'#rgba(0, 0, 0, 0.2)'}
            barStyle='light-content'
            showHideTransition='slide'
            style={styles.statusBar}
            hidden={false}
          />
        </View>
        <View style={styles.navBar}>
          <View style={styles.navBarTitleContainer}>
            <Text style={[styles.navBarTitleText, {color: colorText}]}>{title}</Text>
          </View>
          {
            enableLeftMenu ?
              <TouchableOpacity
                onPress={onLeftPress}
                style={styles.navBarButton}
              >
                <Text style={{color: colorText}}>{leftText}</Text>
              </TouchableOpacity>
              :null
          }
          {
            rightOn ?
              <TouchableOpacity
                onPress={onRightPress}
                style={styles.navBarButton}
              >
                <Text style={{color: colorText}}>{rightText}</Text>
              </TouchableOpacity>
              : null
          }
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  navBarContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: AppColors.brand.primary,
  },
  statusBar: {
    height: AppSizes.statusBarHeight,
  },
  navBar: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: AppSizes.navbarHeight
  },
  navBarTitleContainer: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center'
  },
  navBarTitleText: {
    fontWeight: '500'
  },
  navBarButton: {
    justifyContent: 'center',
    marginLeft: AppSizes.padding * 0.75,
    // marginRight: AppSizes.padding * 0.75
  }
});